<template>
  <div class="wangeditor">
    <div :id="wangId"></div>
  </div>
</template>

<script>
import E from "wangeditor";
export default {
  name: "",
  props: {
    wangId: {
      type: String,
      default: "wangeditor",
    },
    content: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      editor: null,
    };
  },
  computed: {},
  watch: {
  },
  created() {},
  async mounted() {
    await this.creatEditor();
    await this.editor.txt.html(this.content);
  },
  methods: {
    async creatEditor() {
      this.editor = new E(document.getElementById(this.wangId));
      this.editor.config.height = 300;
      this.editor.config.menus = [
        "bold",
        "head",
        "fontSize",
        "underline", // 下划线
        "justify", // 对齐方式
        "foreColor", // 文字颜色
        "backColor", // 背景颜色
        "image", // 插入图片
        "undo", // 撤销
        "redo", // 恢复
      ];
      this.editor.config.fontNames = [
        "宋体",
        "微软雅黑",
        "Arial",
        "Tahoma",
        "Verdana",
      ]; // 字体
      this.editor.config.showLinkImg = false;
      this.editor.config.uploadImgShowBase64 = true; // 使用 base64 保存图片
      this.editor.config.uploadImgMaxSize = 100 * 1024;
      this.editor.config.customAlert = function (info) {
        // info 是需要提示的内容
        alert("图片需小于20KB");
      };
      this.editor.create();
    },
    getHtml() {
      return this.editor.txt.html();
    },
    getText() {
      return this.editor.txt.text();
    },
  },
};
</script>

<style scoped lang='scss'>
.wangeditor {
  padding: 50px 0;
}
</style>